<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="../../inc/global.jsp" %>
<!doctype html>
<html>
<head>
    <title><fmt:message key="jsp.title.mall.admin.nav"/></title>
    <%@ include file="./head.jsp" %>
    <script type="text/javascript">
        function NavOperation() {
            var _this = this;
            var dt, bg;

            function hide() {
                aju.removeAll([dt, bg, $('.tip-yellow')]);
                $('#ajaxClose').remove();
            };
            $(document).keydown(function () {
                if (event.keyCode == KEY.ESC) {
                    hide();
                }
            });
            function showForm(data) {
                dt = aju.ajaxData().css({'width': '400', 'height': 'auto'});
                dt.html(data);
                aju.ajaxClose(dt).click(function () {
                    hide();
                });
                $('#name').focus();
                aju.positionCenter(dt);
                $('#saveNav').click(function () {
                    navOpra.save();
                });
            }

            function refreshItems(callback) {
                $.ajax({
                    url: '/mall/adm/ajax/nav/items',
                    type: 'GET',
                    beforeSend: function () {
                    },
                    success: function (data) {
                        $('.items').html(data);
                        callback();
                        tableTrMouseOver($('table tr'));
                    },
                    error: function () {
                        alert('刷新列表失败');
                    }
                });
            };
            this.add = function (o) {
                var parentId = $(o).parent().parent().attr('id');
                bg = aju.ajaxBg(function () {
                    $.ajax({
                        url: '/mall/adm/ajax/nav/form',
                        type: 'GET',
                        data: {
                            'parentId': parentId
                        },
                        beforeSend: function () {
                            aju.showLoading();
                        },
                        success: function (data) {
                            aju.hideLoading();
                            showForm(data);
                        },
                        error: function () {
                            alert('error');
                        }
                    });
                });
                return false;
            };
            this.edit = function (o) {
                var id = $(o).parent().parent().attr('id');
                bg = aju.ajaxBg(function () {
                    $.ajax({
                        url: '/mall/adm/ajax/nav/form',
                        type: 'GET',
                        data: {
                            'id': id
                        },
                        beforeSend: function () {
                            aju.showLoading();
                        },
                        success: function (data) {
                            aju.hideLoading();
                            showForm(data);
                        },
                        error: function () {
                            alert('error');
                        }
                    });
                });
                return false;
            };
            this.save = function () {
                var id = $('#id').val();
                var name = $('#name').val();
                var suffixURI = $('#suffixURI').val();
                var prefixURI = $('#prefixURI').val();
                var parentId = $('#parentId').val();
                var isHidden = $('input[name=isHidden]:checked').val();
                $(this).attr('disabled');
                $.ajax({
                    url: '/mall/adm/ajax/nav/save',
                    type: 'POST',
                    data: {
                        id: id,
                        name: name,
                        suffixURI: suffixURI,
                        prefixURI: prefixURI,
                        parentId: parentId,
                        isHidden: isHidden
                    },
                    success: function (data) {
                        alert('保存成功！');
                        _this.bindEvents();
                    },
                    error: function () {
                        alert('保存失败！');
                    }
                });
                return false;
            };
            function doUpOrDown(o, act) {
                var url = '/mall/adm/ajax/nav/up';
                if ('down' == act) {
                    url = '/mall/adm/ajax/nav/down';
                }
                bg = aju.ajaxBg(function () {
                    var id = $(o).parent().parent().attr('id');
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: {'id': id},
                        beforeSend: function () {
                            aju.showLoading();
                        },
                        success: function (data) {
                            aju.hideLoading();
                            hide();
                            _this.bindEvents();
                        },
                        error: function () {
                            alert('error');
                        }
                    });
                });
                return false;
            };
            this.doUp = function (o) {
                return doUpOrDown(o,'up');
            }
            this.doDown = function (o) {
                return doUpOrDown(o,'down');
            }
            this.bindEvents = function () {
                refreshItems(function () {
                    $('.add').click(function () {
                        _this.add(this);
                    });
                    $('.items').find('.edit').each(function () {
                        $(this).click(function () {
                            _this.edit(this);
                        });
                    });
                    /**
                     * TODO 这里是错的，这个up和down传的是root节点的ID，应该传当前节点的ID，类似当时edit的BUG，但是我照着改了
                     * 还是不对。就是现在这样子
                     *
                     * 现在ID传对了，不过移动似乎还是有问题！
                     */
                    $('.items').find('.up').each(function () {
                        $(this).click(function () {
                            _this.doUp(this);
                        });
                    });
                    $('.items').find('.down').each(function () {
                        $(this).click(function () {
                            _this.doDown(this);
                        });
                    });

                })
            };
        }
        var navOpra = new NavOperation();
        $(function () {
            navOpra.bindEvents();
        });
    </script>
</head>
<body>
<div class="main">
    <div class="wrapper">
        <%@include file="../header.jsp" %>
        <%@include file="./sidebar.jsp"%>
        <!-- sidebar end -->
        <div class="content">
            <div class="menu-tab">
                <ul>
                    <li class="slt"><a href="/mall/adm/nav">分类管理</a></li>
                </ul>
            </div>
            <div class="items">

            </div>
        </div>
    </div>
</div>
</body>
</html>